<template>
  <div class="card-list">
    <slot name="addBtn"></slot>
    <custom-list class="list-box" ref="cardList" :scrollY="false" :loadData="onLoadData">
      <div class="card-item" slot-scope="scope">
        <slot :data="scope.data" />
      </div>
    </custom-list>
  </div>
</template>

<script>
export default {
  name: 'cardList',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    reset () {
      if (this.$refs.cardList) this.$refs.cardList.reset();
    },
    onLoadData (pageNum) {
      return new Promise((resolve, reject) => {
        resolve({
          dataList: this.value,
          totalCount: (this.value || []).length,
          finished: true
        });
      });
    }
  },
  watch: {
    value: {
      handler () {
        if (this.$refs.cardList) this.$refs.cardList.reset();
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.card-item {
  background: #F6F7F9;
  border-radius: 8px;
  margin-bottom: 15px;
}
</style>
